@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;

@layer base {
  html {
    min-width: 360px;
    scroll-behavior: smooth;
  }

  body {
    @apply text-black dark:text-white;
    transition: background-color 1s linear, color 0.5s linear;
    min-height: 100vh;
  }

  pre {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }

  /* Remove Safari input shadow on mobile */
  input[type='text'],
  input[type='email'] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }

  table {
    display: block;
    max-width: fit-content;
    overflow-x: auto;
    white-space: nowrap;
  }

  a[target='_blank'],
  a[href]:not(:where(
  /* exclude hash only links */
  [href^="#"],
  /* exclude relative links */
  [href^="/"],
  /* domains to exclude */
  [href*="://willin.wang"],
  /* subdomains to exclude */
  [href*="://beta.willin.wang"],
)):after {
    /* content: ' ↗️ '; */
    content: ' '
      url();
  }
}

@layer components {
  #background {
    @apply fixed inset-0 saturate-150;
    background: url('/images/bg.jpg') no-repeat center center fixed;
    background-size: cover;
    transition: all 0.25s ease-in-out;
    transform-style: preserve-3d;
  }
}

@layer utilities {
  .dark-bg {
    @apply brightness-50 saturate-100;
    transform: rotate(-3deg) scale(1.2);
    /* scaleX(-1); */
  }
}
